<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>layout 后台大布局 - Layui</title>
  <link rel="stylesheet" href="layui/css/layui.css">
  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="css/swiper.min.css">
  <link rel="stylesheet" href="css/animate.min.css">

  <link rel="stylesheet" href="css/ui_layui_header.css">
  <link rel="stylesheet" href="css/ui_swiper.css">

  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
</head>


<body class="layui-layout-body">
  <div id="roorView" class="layui-layout layui-layout-admin">

    <!-- 头部区域（可配合layui已有的水平导航） -->
    <div class="layui-header" >
      <div class="layui-nav">
        <li class="layui-nav-item" style="margin: 0; border: 0">
          <a href="javascript:">
            <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
            贤心
          </a>
          <dl class="layui-nav-child" style="padding: 0">
            <script src="js/ui_user_info.js"></script>
            <!--<div>-->
              <!--<button style="width: 600px;">123</button>-->
            <!--</div>-->
            <!--<dd><a href="">基本资料</a></dd>-->
            <!--<dd><a href="">安全设置</a></dd>-->
            <!--<dd><a href="">退了</a></dd>-->
          </dl>
        </li>

      </div>
      <ul class="layui-nav layui-layout-left">
        <li class="layui-nav-item layui-this" onclick="navClick(0)"><a href="javascript:">控制台</a></li>
        <li class="layui-nav-item" onclick="navClick(1)"><a href="javascript:">商品管理</a></li>
        <li class="layui-nav-item" onclick="navClick(2)"><a href="javascript:">用户</a></li>
        <li class="layui-nav-item" onclick="navClick(3)"><a href="javascript:">用户</a></li>
      </ul>

      <div class="layui-nav layui-layout-right" style="height: auto">
        <a class="layui-nav-item layui-icon layui-icon-close" style="font-size: 18px; color: #4D4B4B;  margin:0"
           href="javascript:" onclick="thisClick()">
        </a>
        <a class="layui-nav-item layui-icon layui-icon-close" style="font-size: 18px; color: #4D4B4B;  margin: 0 15px 0 15px"
           href="javascript:" onclick="thisClick()">
        </a>
      </div>

    </div>

    <div class="layui-body" style="bottom: 70px">
      <!-- 内容主体区域  style="padding: 15px;"-->
      <div>
        <!--<script src="js/ui_swiper.js"></script>-->

        <!-- Swiper -->
        <div class='swiper-container'>
          <div class='swiper-wrapper' style="background-color: white">
            <div class='swiper-slide'>
              <!--<p  swiper-animate-effect='fadeInUp' swiper-animate-duration='0.5s' swiper-animate-delay='0.3s'>内容</p>-->

              <ul class="flow-default" id="LAY_demo1" style="height: 100%; min-height: 100%; "
                  swiper-animate-effect='fadeInUp' swiper-animate-duration='0.5s' swiper-animate-delay='0.3s'
              ></ul>


            </div>
            <div class='swiper-slide red-slide'>
              <p  swiper-animate-effect='bounceInLeft' swiper-animate-duration='0.5s' swiper-animate-delay='0.3s'>内容</p>
            </div>
            <div class='swiper-slide orange-slide'>
              <p class='ani' swiper-animate-effect='shake' swiper-animate-duration='1.5s' swiper-animate-delay='0s'>内容</p>
            </div>
          </div>
        </div>

        <button id='lastPage'>上一页</button>
        <button id='nextPage'>下一页</button>
        <button id='destory'>销毁</button>
        <button id='addPage'>添加1个page</button>
        <button id='addPage2'>添加2个page</button>
        <!-- Swiper JS -->
        <script src='js/swiper.min.js'></script>
        <script src='js/swiper.animate.min.js'></script>

        <!-- Initialize Swiper -->
        <script>
          var mySwiper = new Swiper('.swiper-container',{
            // on 用来注册事件
            on:{
              init: function(){ // swiper 初始化运行
                swiperAnimateCache(this); //隐藏动画元素
                this.emit('slideChangeTransitionEnd');//在初始化时触发一次slideChangeTransitionEnd事件
              },
              slideChangeTransitionEnd: function(){
                swiperAnimate(this); //每个slide切换结束时运行当前slide动画
                this.slides.eq(this.activeIndex).find('.ani').removeClass('ani');//动画只展示一次
              },
              // 窗口大小更改
              resize: function(){
                this.params.width = window.innerWidth;
                this.update();
              },
              // 页面切换事件
              slideChange: function () {
                console.log(this.activeIndex);
              },
              pagination: {
                el: '.swiper-pagination',
              },
            },

            speed:200,// 页面切换速度
            autoHeight: true, //高度随内容变化，考虑到内部列表高度，可能会用上
            watchOverflow: true,//因为仅有1个slide，swiper无效
            touchMoveStopPropagation : false, // 阻止touchmove冒泡事件
            resistanceRatio:0, // 到边缘时无法再拖动
            // simulateTouch : false,//禁止鼠标模拟
            // allowTouchMove: false,// 禁止鼠标、手机滑动，只能代码动态转变

            // centeredSlides : true, // 左右不再紧贴容器边缘， 配合slidesPerView
            // slidesPerView : 3, // 一次性最多显示几个page
            // spaceBetween : 20, // page之间的间距
            // direction: 'vertical',
            // loop: true,
          });

        </script>
      </div>
    </div>

    <div class="layui-footer" style="width: 100%; height: 70px; left: 0; padding-left: 0; background-color: #EEF0F6">
      <!-- 底部固定区域 -->
      <div class="layui-container" style="width:100%; margin: 0;">
        <div class="layui-row">
          <div class="layui-col-xs4" style="padding: 8px 0 10px" align="center">
            <img src="tile.png" style="width: 35px; align-content: center">
            <p style="height: auto; line-height: 15px">123</p>
          </div>
          <div class="layui-col-xs4" style=" padding: 8px 0 10px" align="center" onclick="addScan()">
            <img src="tile.png" style="width: 35px; align-content: center">
            <p style="height: auto; line-height: 15px">123</p>
          </div>
          <div class="layui-col-xs4" style=" padding: 8px 0 10px" align="center">
            <img src="tile.png" style="width: 35px; align-content: center">
            <p style="height: auto; line-height: 15px">123</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="layui/layui.js"></script>
  <script src = "js/ui_layui.js"></script>
</body>

<script>

  function addScan() {
      // 弹出子界面, 并把 datakey 传到子界面
      layer.open({
          title: ['可修改内容并关闭这个界面']
          , type: 2
          , fixed: false
          , shadeClose: true
          , area: ['400px', '600px']
          , content: 'ScanSettingHtml.html?datakey=123'
      });
  }
  
</script>

</html>
